<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>申请投放</title>
    <link rel="stylesheet" href="applyMachine.css">
    <script src="../layui/layui.js"></script>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../src/static/jquery.js"></script>


    <link rel="stylesheet" href="css/style.css">

</head>
<body>
<div>
    <!--<div class="H_top">申请投放</div>-->


    <form class="layui-form" id="from">
        <div class="fengeceng"></div>

        <div class="nav_tt">( 请按要求提交下列证件照片 )</div>
        <div class="fengeceng"></div>
        <div class="sfz_top">
            <div class="sfz_s">1.法人持身份证拍照</div>
            <div class="ccc_c">参考照片：</div>
            <div class="layui-container">

                <div class="layui-row">
                    <div class="layui-col-xs6">
                        <div class="shili scsfz"></div>
                    </div>
                    <div class="layui-col-xs6">
                        <div class="shili_nav" id="demo1">
                            <div id="icon_1" class="gs_wj">点击提交身份证拍照</div>
                            <!--<i id="icon_1" class="layui-icon layui-icon-picture"></i>-->
                        </div>
                        <input type="hidden" value="" name="taxPic" id="taxPic">
                    </div>
                </div>
            </div>


            <div class="ccc_c">请您的脸部和身份证清晰可见</div>
        </div>

        <div class="yyzz_top">
            <div class="fengeceng"></div>
            <div class="yyzz_s">2.营业执照</div>
            <div class="ccc_c">参考照片：</div>
            <div class="layui-container">

                <div class="layui-row">
                    <div class="layui-col-xs6">
                        <div class="shili yyzz_zp"></div>
                    </div>
                    <div class="layui-col-xs6">
                        <div class="shili_nav" id="demo2">
                            <div id="icon_2" class="gs_wj">点击提交营业执照</div>
                            <!--<i id="icon_2" class="layui-icon layui-icon-picture"></i>-->
                        </div>
                        <input type="hidden" value="" name="businessPic" id="businessPic">
                    </div>
                </div>
            </div>

            <div class="ccc_c">请保证相关信息清晰可见</div>
        </div>
        <div class="gs_top">
            <div class="fengeceng"></div>
            <div class="gs_s">3.公司内外景</div>
            <div class="sfz_k " id="demo3">
                <div class="gs_wj" id="icon_3">点击提交公司外景一</div>
                <input type="hidden" value="" name="gatePic1" id="gatePic1">
            </div>
            <div class="sfz_k Top" id="demo4">
                <div class="gs_wj" id="icon_4">点击提交公司内景一</div>
                <input type="hidden" value="" name="gatePic2" id="gatePic2">
            </div>
            <div class="sfz_k Top" id="demo5">
                <div class="gs_wj" id="icon_5">点击提交公司内景二</div>
                <input type="hidden" value="" name="gatePic3" id="gatePic3">
            </div>
            <div class="sfz_k Top" id="demo6">
                <div class="gs_wj" id="icon_6">点击提交公司内景三</div>
                <input type="hidden" value="" name="gatePic4" id="gatePic4">
            </div>
            <div class="sfz_k Top butt" id="demo7">
                <div class="gs_wj" id="icon_7">点击提交公司内景四</div>
                <input type="hidden" value="" name="gatePic5" id="gatePic5">
            </div>
        </div>
        <div class="fengeceng"></div>
        <div class="nav_tt">（以下为您的重要信息请认真填写)</div>
        <div class="fengeceng"></div>
        <div style="margin-bottom: 5%">

        </div>
        <div class="layui-form-item nav_ss">
            <div class="layui-form-label phone"><label>*</label>公司名称</div>
            <div class="layui-input-block">
                <input type="text" name="companyName" required lay-verify="required" placeholder="请输入"
                       autocomplete="off" class="layui-input" value="" id="gsMc">
            </div>
        </div>
        <div class="layui-form-item nav_ss">
            <div class="layui-form-label phone"><label>*</label>手机号码</div>
            <div class="layui-input-block">
                <input type="text" name="phone" required lay-verify="required" placeholder="请输入"
                       autocomplete="off" class="layui-input" value="" id="phoneNum">
            </div>
        </div>

        <div class="layui-form-item nav_ss">
            <div class="layui-form-label phone"><label>*</label>选择地区</div>
            <div class="layui-input-block">
                <div class="iphone">
                    <div class="browser">
                        <!--选择地区-->
                        <section class="express-area">
                            <a id="expressArea" href="javascript:void(0)">
                                <dl>
                                    <dd id="quyu">省 > 市 > 区/县</dd>
                                </dl>
                            </a>
                        </section>
                    </div>
                </div>
            </div>
        </div>

        <!--选择地区弹层-->
        <section id="areaLayer" class="express-area-box">
            <header>
                <h3>选择地区</h3>
                <a id="backUp" class="back" href="javascript:void(0)" title="返回"></a>
                <a id="closeArea" class="close" href="javascript:void(0)" title="关闭"></a>
            </header>
            <article id="areaBox">
                <ul id="areaList" class="area-list"></ul>
            </article>
        </section>
        <!--遮罩层-->
        <div id="areaMask" class="mask"></div>
        <script src="js/jquery.area.js"></script>

        <div class="layui-form-item layui-form-text nav_ss">
            <div class="layui-form-label phone"><label>*</label>存放点位</div>
            <div class="layui-input-block">
                    <textarea name="depositAddress" value="" id="Loca" placeholder="请输入详细地址"
                              class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="nav_bb">
            <div style="text-align: center">
                <button class="layui-btn layui-btn-fluid layui-btn-radius layui-btn-normal" id="tiJiao"
                        onclick="login_check()" type="button" style="width: 80%;">确认提交
                </button>
            </div>
            <!--<div>-->
            <!--<div class="layui-input-block">-->
            <!--<input type="radio" name="wenben" value="0" >-->
            <!--<a>文本</a>-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="nav">-->
            <!--<p class="xieyi">点击确认即表示同意</p>-->
            <!--<a href="../putIn/agreement.html">《用户投放协议》</a>-->
            <!--<a href="">《投放合作协议》</a>-->
            <!--</div>-->
        </div>


    </form>
    <!-- 空iframe，用于协助处理form提交后不进行页面跳转的问题 -->
    <!--<iframe id="iframe_display" name="iframe_display" style="display: none;"></iframe>-->
    <iframe name="myIframe" style="display:none"></iframe>
</div>
<script>

    layui.use(['upload'], function () {
        var upload = layui.upload;
//执行实例
        var uploadInst = upload.render({
            elem: '#demo1' //绑定元素
            , url: '/api/UploadImg' //上传接口
            , method: 'post' //上传接口类型
            , data: {
                companyName: function () {
                    var gsMc = "";
                    return gsMc;
                }
            }
            , headers: {
//                Authorization: BEAR.getLocalStr('access_token')
            }  //接口的请求头
            , accept: 'images'  //校验文件类型
            , exts: 'jpg|png|gif|bmp|jpeg'   //允许上传的文件后缀名
            , auto: true  //是否选择完文件之后自动上传
//            , bindAction: '#tiJiao'  //按钮触发上传
            , field: 'fileList'  //文件域的字段名
            , size: 5000 //最大可允许上传大小
            , multiple: false //是否允许多文件上传
            , drag: true  //是否接受文件拖拽上传
            , before: function (obj) {
                layer.load(); //上传loading
            }
            , done: function (res) {
                //上传完毕回调
                layer.closeAll('loading'); //关闭loading
                $('#icon_1').hide();
                $('#demo1').css({
                    'background-image': 'url("' + res.src + '")',
                    'background-position': 'center',
                    'background-repeat': 'no-repeat',
                    'background-size': 'cover'
                });
                $('#taxPic').val(res.src);
            }
            , error: function () {
//请求异常回调
                layer.closeAll('loading'); //关闭loading
            }
        });

        var uploadInst2 = upload.render({
            elem: '#demo2' //绑定元素
            , url: '/api/UploadImg' //上传接口
            , method: 'post' //上传接口类型
            , data: {
                companyName: function () {
                    var gsMc = "";
                    return gsMc;
                }
            }
            , headers: {
//                Authorization: BEAR.getLocalStr('access_token')
            }  //接口的请求头
            , accept: 'images'  //校验文件类型
            , exts: 'jpg|png|gif|bmp|jpeg'   //允许上传的文件后缀名
            , auto: true  //是否选择完文件之后自动上传
//            , bindAction: '#tiJiao'  //按钮触发上传
            , field: 'fileList'  //文件域的字段名
            , size: 5000  //最大可允许上传大小
            , multiple: false //是否允许多文件上传
            , drag: true  //是否接受文件拖拽上传
            , before: function (obj) {
                layer.load(); //上传loading
            }
            //, auto: true 时，选择文件后直接上传，成功后会调用此方法，返回的文件路径放到对应的元素上就可以了
            , done: function (res) {
                //上传完毕回调
                layer.closeAll('loading'); //关闭loading
                $('#icon_2').hide();
                $('#demo2').css({
                    'background-image': 'url("' + res.src + '")',
                    'background-position': 'center',
                    'background-repeat': 'no-repeat',
                    'background-size': 'cover'
                });
                $('#businessPic').val(res.src);
            }
            , error: function () {
                //请求异常回调
                layer.closeAll('loading'); //关闭loading
            }
        });

        var uploadInst3 = upload.render({
            elem: '#demo3' //绑定元素
            , url: '/api/UploadImg' //上传接口
            , method: 'post' //上传接口类型
            , data: {
                companyName: function () {
                    var gsMc = "";
                    return gsMc;
                }
            }
            , headers: {
//                Authorization: BEAR.getLocalStr('access_token')
            }  //接口的请求头
            , accept: 'images'  //校验文件类型
            , exts: 'jpg|png|gif|bmp|jpeg'   //允许上传的文件后缀名
            , auto: true  //是否选择完文件之后自动上传
//            , bindAction: '#tiJiao'  //按钮触发上传
            , field: 'fileList'  //文件域的字段名
            , size: 5000  //最大可允许上传大小
            , multiple: false //是否允许多文件上传
            , drag: true  //是否接受文件拖拽上传
            , before: function (obj) {
                layer.load(); //上传loading
            }
            , done: function (res) {
//上传完毕回调
                layer.closeAll('loading'); //关闭loading
                $('#icon_3').hide();
                $('#demo3').css({
                    'background-image': 'url("' + res.src + '")',
                    'background-position': 'center',
                    'background-repeat': 'no-repeat',
                    'background-size': 'cover'
                });
                $('#gatePic1').val(res.src);
            }
            , error: function () {
//请求异常回调
                layer.closeAll('loading'); //关闭loading
            }
        });


        var uploadInst4 = upload.render({
            elem: '#demo4' //绑定元素
            , url: '/api/UploadImg' //上传接口
            , method: 'post' //上传接口类型
            , data: {
                companyName: function () {
                    var gsMc = "";
                    return gsMc;
                }
            }
            , headers: {
//                Authorization: BEAR.getLocalStr('access_token')
            }  //接口的请求头
            , accept: 'images'  //校验文件类型
            , exts: 'jpg|png|gif|bmp|jpeg'   //允许上传的文件后缀名
            , auto: true  //是否选择完文件之后自动上传
//            , bindAction: '#tiJiao'  //按钮触发上传
            , field: 'fileList'  //文件域的字段名
            , size: 5000  //最大可允许上传大小
            , multiple: false //是否允许多文件上传
            , drag: true  //是否接受文件拖拽上传
            , before: function (obj) {
                layer.load(); //上传loading
            }
            , done: function (res) {
//上传完毕回调
                layer.closeAll('loading'); //关闭loading
                $('#icon_4').hide();
                $('#demo4').css({
                    'background-image': 'url("' + res.src + '")',
                    'background-position': 'center',
                    'background-repeat': 'no-repeat',
                    'background-size': 'cover'
                });
                $('#gatePic2').val(res.src);
            }
            , error: function () {
//请求异常回调
                layer.closeAll('loading'); //关闭loading
            }
        });


        var uploadInst5 = upload.render({
            elem: '#demo5' //绑定元素
            , url: '/api/UploadImg' //上传接口
            , method: 'post' //上传接口类型
            , data: {
                companyName: function () {
                    var gsMc = "";
                    return gsMc;
                }
            }
            , headers: {
//                Authorization: BEAR.getLocalStr('access_token')
            }  //接口的请求头
            , accept: 'images'  //校验文件类型
            , exts: 'jpg|png|gif|bmp|jpeg'   //允许上传的文件后缀名
            , auto: true  //是否选择完文件之后自动上传
//            , bindAction: '#tiJiao'  //按钮触发上传
            , field: 'fileList'  //文件域的字段名
            , size: 5000  //最大可允许上传大小
            , multiple: false //是否允许多文件上传
            , drag: true  //是否接受文件拖拽上传
            , before: function (obj) {
                layer.load(); //上传loading
            }
            , done: function (res) {
//上传完毕回调
                layer.closeAll('loading'); //关闭loading
                $('#icon_5').hide();
                $('#demo5').css({
                    'background-image': 'url("' + res.src + '")',
                    'background-position': 'center',
                    'background-repeat': 'no-repeat',
                    'background-size': 'cover'
                });
                $('#gatePic3').val(res.src);
            }
            , error: function () {
//请求异常回调
                layer.closeAll('loading'); //关闭loading
            }
        });


        var uploadInst6 = upload.render({
            elem: '#demo6' //绑定元素
            , url: '/api/UploadImg' //上传接口
            , method: 'post' //上传接口类型
            , data: {
                companyName: function () {
                    var gsMc = "";
                    return gsMc;
                }
            }
            , headers: {
//                Authorization: BEAR.getLocalStr('access_token')
            }  //接口的请求头
            , accept: 'images'  //校验文件类型
            , exts: 'jpg|png|gif|bmp|jpeg'   //允许上传的文件后缀名
            , auto: true  //是否选择完文件之后自动上传
//            , bindAction: '#tiJiao'  //按钮触发上传
            , field: 'fileList'  //文件域的字段名
            , size: 5000  //最大可允许上传大小
            , multiple: false //是否允许多文件上传
            , drag: true  //是否接受文件拖拽上传

            , before: function (obj) {
                layer.load(); //上传loading
            }
            , done: function (res) {
//上传完毕回调
                layer.closeAll('loading'); //关闭loading
                $('#icon_6').hide();
                $('#demo6').css({
                    'background-image': 'url("' + res.src + '")',
                    'background-position': 'center',
                    'background-repeat': 'no-repeat',
                    'background-size': 'cover'
                });
                $('#gatePic4').val(res.src);
            }
            , error: function () {
//请求异常回调
                layer.closeAll('loading'); //关闭loading
            }
        });

//        $('#gsMc').val()
        var uploadInst7 = upload.render({
            elem: '#demo7' //绑定元素
            , url: '/api/UploadImg' //上传接口
            , method: 'post' //上传接口类型
            , data: {
                companyName: function () {
                    var gsMc = "";
                    return gsMc;
                }
            }
            , headers: {
//                Authorization: BEAR.getLocalStr('access_token')
            }  //接口的请求头
            , accept: 'images'  //校验文件类型
            , exts: 'jpg|png|gif|bmp|jpeg'   //允许上传的文件后缀名
            , auto: true  //是否选择完文件之后自动上传
//            , bindAction: '#tiJiao'  //按钮触发上传
            , field: 'fileList'  //文件域的字段名
            , size: 5000  //最大可允许上传大小
            , multiple: false //是否允许多文件上传
            , drag: true  //是否接受文件拖拽上传

            , before: function (obj) {
                layer.load(); //上传loading
            }
            , done: function (res) {
//上传完毕回调
                layer.closeAll('loading'); //关闭loading
                $('#icon_7').hide();
                $('#demo7').css({
                    'background-image': 'url("' + res.src + '")',
                    'background-position': 'center',
                    'background-repeat': 'no-repeat',
                    'background-size': 'cover'
                });
                $('#gatePic5').val(res.src);
            }
            , error: function () {
//请求异常回调
                layer.closeAll('loading'); //关闭loading
            }
        });
    });
</script>
<script>
    layui.use(['form','layer'], function () {
        var form = layui.form;

        var layer = layui.layer;

        layer.open({
            type:1,
            title: ['本申请适用于', 'text-align: right;font-size:18px;font-weight:600'],
//            content: '1、新增加的设备投放点；<br/>2、已持有设备的注册认证；',
            content: '<div style="margin-top: 10%;text-align: center"><div>1、新增加的设备投放点位；</div><div style="margin-top: 2%">2、已持有设备的注册认证；</div></div>',
            closeBtn:1,
            offset: 'auto',
            area: ['260px', '150px'] //自定义文本域宽高
        });
    });

    function login_check() {
        var quyu = $('#quyu').text();
        var cfdq = $('#Loca').val();
        $('#Loca').val(quyu + ">" + cfdq);
        var blg = yanzheng(); //验证

        if (blg == true) {
            var companyName = $("#gsMc").val();
            var phone = $("#phoneNum").val();
            var depositAddress = $("#Loca").val();
            var taxPic = $("#taxPic").val();
            var businessPic = $("#businessPic").val();
            var gatePic1 = $("#gatePic1").val();
            var gatePic2 = $("#gatePic2").val();
            var gatePic3 = $("#gatePic3").val();
            var gatePic4 = $("#gatePic4").val();
            var gatePic5 = $("#gatePic5").val();


            $.ajax(
                {
                    url: '/api/getAudingInfortion',
                    data: {
                        companyName: companyName,
                        phone: phone,
                        depositAddress: depositAddress,
                        taxPic: taxPic,
                        businessPic: businessPic,
                        gatePic1: gatePic1,
                        gatePic2: gatePic2,
                        gatePic3: gatePic3,
                        gatePic4: gatePic4,
                        gatePic5: gatePic5
                    },
                    type: 'POST',
                    dataType: 'json',
                    success: function (data) {
                        alert(data.msg);
                        window.location.reload();
                    },
                    error: function (error) {
                        //请求失败  获取的报错信息
                        console.log(error);
                    }
                }
            );
        }


//            $.ajax(
//                {
//                    url: '/api/getAudingInfor',
//                    data: form,
//                    type: 'POST',
//                    dataType: 'json',
//                    success: function (data) {
//                        alert(data.msg);
//                    },
//                    error: function (error) {
//                        //请求失败  获取的报错信息
//                        alert(data.msg);
//                    }
//                }
//            );
    }

    function yanzheng() {
        var vr = $('input:radio[name="wenben"]:checked').val()
        if ($('#phoneNum').val().length !== 11) {
            alert("手机号码输入错误！");
            return false;
        } else if ($('#Loca').val() == null || $('#Loca').val() == "") {
            alert("存放点位不能为空！");
            return false;
        } else if ($('#taxPic').val() == null || $('#taxPic').val() == "") {
            alert("法人持身份证拍照不能为空！");
            return false;
        } else if ($('#businessPic').val() == null || $('#businessPic').val() == "") {
            alert("营业执照不能为空！");
            return false;
        } else if ($('#gatePic1').val() == null || $('#gatePic1').val() == "") {
            alert("公司外景一不能为空！");
            return false;
        } else if ($('#gatePic2').val() == null || $('#gatePic2').val() == "") {
            alert("公司内景一不能为空！");
            return false;
        }
        else if ($('#gatePic3').val() == null || $('#gatePic3').val() == "") {
            alert("公司内景二不能为空！");
            return false;
        }
        else if ($('#gatePic4').val() == null || $('#gatePic4').val() == "") {
            alert("公司内景三不能为空！");
            return false;
        } else if ($('#gatePic5').val() == null || $('#gatePic5').val() == "") {
            alert("公司内景三不能为空！");
            return false;
        }
//        else if( vr ==='' || typeof(vr) === 'undefined'){
//            alert("请勾选我已同意！");
//            return false;
//        }
        return true;
    }
</script>
</body>
</html>